<!-- 参与人 -->
<template>
  <div class="the-list">
    <div class="panel-search">
      <el-form inline :model="table.query" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input
            v-model="table.query.perName"
            placeholder="姓名"
            clearable
          />
        </el-form-item>

        <el-form-item label="手机号">
          <el-input
            oninput="value=value.replace(/[^\d]/g,'')>0?value.replace(/[^\d]/g,''):''"
            v-model="table.query.perPhone"
            placeholder="手机号"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="tableFn.onSubmit()">搜索</el-button>
          <el-button type="primary" @click="tableFn.onResetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="panel-table">
      <div class="table-head">
        <span>参与人列表</span>
      </div>
      <el-table
        :data="table.list"
        stripe
        :header-cell-style="{ backgroundColor: '#ededed', padding: '12px 0' }"
        style="width: 100%"
        border
      >
        <el-table-column prop="perName" label="姓名" />
        <el-table-column prop="perSex" label="性别">
          <template #default="{ row }">
            {{ tableFn.getItemFromArray(table.sexList, row.perSex) }}
          </template>
        </el-table-column>
        <el-table-column prop="perPhone" label="电话" />
        <el-table-column prop="perBirthday" label="生日" />
        <el-table-column prop="createdAt" label="参与时间" />
      </el-table>
      <div class="table-pagination">
        <pagination
          :total="table.total"
          v-model:page="table.query.page"
          v-model:limit="table.query.pageSize"
          @pagination="tableFn.getTableList"
        />
      </div>
    </div>
  </div>
</template>


<script>
import { reactive, watch } from "vue";
import { getEventPersonList } from "@/api/eventsinfo.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { eventsList, getItemFromArray, isLongTime } from "@/utils/tool";
import Pagination from "@/components/Pagination";
import { onBeforeRouteUpdate, useRouter } from "vue-router";

export default {
  name: "EventsPerson",
  components: {
  },
  setup() {
    // 默认数据备份，以便重置或恢复
    const { $data: table, $fn: tableFn } = tableModule();
    return {
      table,
      tableFn,
    };
  },
};

function tableModule() {
  const router = useRouter();
  const params = router.currentRoute.value.params;
  const backup = {
    query: {
      perName: "",
      perPhone: "",
      pageSize: 10,
      page: 1,
    },
  };
  const $data = reactive({
    query: {
      pageSize: 10,
      page: 1,
      perName: "",
      perPhone: "",
    },
    total: 0,
    list: [],
    sexList:[
    { key: '0',name: "男" },
    { key: '1',name: "女"},
  ],
  });
  const $fn = {
    onSubmit() {
      $fn.getTableList();
    },
    getTableList() {
      $data.query.eventsId = params.id;
      getEventPersonList($data.query).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items || [];
          $data.total = res.data.pagination.total_record;
        }
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableList();
    },
    getItemFromArray(itemList, item){
      return getItemFromArray(itemList, item);
    }
  };
  $fn.getTableList();
  return {
    $data,
    $fn,
  };
}
</script>
<style scoped lang="scss">
@import "@/styles/tablePage.scss";
// .the-list {
//   height: 100%;
// }
.el-form-item {
  margin-bottom: 8px;
}
</style>